<template>
    <div class="seller" ref="sellers">
        <div class="seller-wrapper">
            <div class="overview">
                <h1 class="title">{{seller.name}}</h1>
                <div class="desc">
                    <star :size="36" :score="seller.score"></star>
                    <span class="text">({{seller.ratingCount}})</span>
                    <span class="text">月售{{seller.sellCount}}单</span>
                </div>
                <ul class="remark">
                    <li class="block">
                        <h2 class="title">起送价</h2>
                        <div class="content">
                            <span class="stress">{{seller.minPrice}}</span>元
                        </div>
                    </li>
                    <li class="block">
                        <h2 class="title">商家配送</h2>
                        <div class="content">
                            <span class="stress">{{seller.deliveryPrice}}</span>元
                        </div>
                    </li>
                    <li class="block">
                        <h2 class="title">平均配送时间</h2>
                        <div class="content">
                            <span class="stress">{{seller.deliveryTime}}</span>分钟
                        </div>
                    </li>
                </ul>
                <div class="favorite" @click="change">
                    <span class="icon-favorite" :class="{'active':favorite}"></span>
                    <span class="text">{{favoriteText}}</span>
                </div>
            </div>
            <split></split>
            <div class="bulletin">
                <h1 class="title">公告与活动</h1>
                <div class="content-wrapper">
                    <p class="content">{{seller.bulletin}}</p>
                </div>
                <ul v-if="seller.supports" class="supports">
                    <li v-for="(item,key) in seller.supports" :key="key" class="support-item">
                        <span class="icon" :class="classMap[item.type]"></span>
                        <span class="text">{{item.description}}</span>
                    </li>
                </ul>
            </div>
            <split></split>
            <div class="pics">
                <h1 class="title">商家实景</h1>
                <div class="pic-wrapper" ref="picWrapper" >
                    <ul class="pic-list" ref="picList">
                        <li class="pic-item" v-for="(pic,key) in seller.pics" :key="key">
                            <img :src="pic" width="120" height="120" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <split></split>
            <div class="info">
                <h1 class="title">商家信息</h1>
                <ul>
                    <li class="info-item" v-for="(info,key) in seller.infos" :key="key">{{info}}</li>
                </ul>

            </div>
        </div>
       
    </div>
</template>
<script>
import star from '../star/star'
import split from '../split/split'
import BScroll from 'better-scroll'
import shopcart from '../shopcart/shopcart'
export default {
    data() {
        return {
            favorite:false
        }
    },
    props:['seller'],
    components : {
        star,split,shopcart
    },
    watch: {
        'seller'(){
            this._initScroll()
        }
    },
    ready(){
        this._initScroll()
    },
    computed: {
        favoriteText(){
            return this.favorite?'已收藏':'收藏';
        }
    },
    methods: {
        _initScroll(){
            if(!this.scroll){
                this.$nextTick(()=>{
                    this.scroll = new BScroll(this.$refs.sellers,{
                        click: true
                    })
                    this.picScroll = new BScroll(this.$refs.picWrapper,{
                        click: true,
                        startX:0,
                        scrollX:true,
                        scrollY:false
                    })
                })
            }else{
                this.scroll.refresh();
            }
        },
        change(){
            this.favorite = !this.favorite
            sessionStorage.setItem('favorite',this.favorite)
        }
    },
    created(){
        this.classMap = ['decrease','discount','special','invoice','guarantee']
        this._initScroll()
        this.favorite = sessionStorage.getItem('favorite')
    }
}
</script>
<style lang="stylus">
@import '../../common/stylus/base.styl'
@import '../../common/stylus/mixin.styl'
@import '../../common/fonts/icon.css'

.seller
    position absolute
    top 174px
    bottom 0
    left 0
    width 100%
    overflow hidden
    .overview
        padding 18px
        .title
            font-size 14px
            color rgb(7,17,27)
            line-height 14px
        .desc
            margin-top 8px
            padding-bottom 18px
            border-bottom 1px solid rgba(7,17,27,0.1)
            .text
                font-size 10px
                color rgb(77,85,93)
                margin 0 12px 0 8px
                &:last-child
                    margin 0px
        .remark
            width 100%
            padding 18px 0 0 0
            overflow hidden
            .block
                text-align center
                width 33%
                float left
                border-right 1px solid rgba(7,17,27,0.1)
                &:last-child
                    border-right none 
                .title
                    font-size 10px
                    color rgb(147,153,159)
                    line-height 10px
                .content
                    margin-top 4px
                    .stress
                        font-size 24px
                        font-weight 200
                        color rgb(7,17,27)
                        line-height 24px
        .favorite
            position absolute
            right 11px
            top 18px
            text-align center
            .icon-favorite
                display block
                font-size 24px
                line-height 24px
                color rgba(7,17,27,0.5)
                margin-bottom 4px
                &.active
                    color rgb(240,20,20)
            .text
                font-size 10px
                color rgb(77,85,93)
                line-height 10px
    .bulletin
        padding 18px
        .title
            font-size 14px
            color rgb(7,17,27)
            line-height 14px
        .content-wrapper
            padding 8px 12px 16px 12px
            border-bottom 1px solid rgba(7,17,27,0.1)
            .content
                font-size 12px
                font-weight 200
                color rgb(240,20,20)
                line-height 24px
        .supports
            padding 0 12px
            .support-item
                padding 16px 0
                border-bottom 1px solid rgba(7,17,27,0.1)
                &:last-child
                    border-bottom none
                    padding-bottom 0
                .icon
                    vertical-align top
                    display inline-block
                    width 16px
                    height 16px
                    margin-right 6px
                    background-size 16px 16px
                    background-repeat no-repeat
                    &.decrease
                        bg-img('decrease_4')
                    &.discount
                        bg-img('discount_4')
                    &.guarantee
                        bg-img('guarantee_4')
                    &.invoice
                        bg-img('invoice_4')
                    &.special
                        bg-img('special_4')
                .text
                    font-size 12px
                    line-height 16px
                    font-weight 200
                    color rgb(7,17,27)
    .pics
        padding 18px 
        .title
            font-size 14px
            color rgb(7,17,27)
            line-height 14px
        .pic-wrapper
            width 100%
            white-space nowrap
            margin-top 12px
            overflow hidden
            .pic-list 
                width 126*4px
                .pic-item
                    float left
                    margin-right 6px
    .info
        padding 18px 18px 0 18px
        .title
            font-size 14px
            color rgb(7,17,27)
            line-height 14px
            padding-bottom 12px
            border-bottom 1px solid rgba(7,17,27,0.1)
        .info-item
            border-bottom 1px solid rgba(7,17,27,0.1)
            padding 16px 12px
            font-size 12px
            line-height 16px
            color rgb(7,17,27)
            &:last-child
                border-bottom none 
                padding-bottom 0



</style>

